import React from "react";


// class DataSource {

//   constructor() {
//     // 订阅者
//   this.row = [1,2,3,4,5]

//   }
//   // 订阅报纸
//   // addChangeListener(demo){
//   //   this.row.push(demo)
//   // }
//   getComments()
//   {
//     return this.row
//   }
// }

// // const DataSource = new DataSource()
// class CommentList extends React.Component {
//   constructor(props) {
//     super(props);
//     this.handleChange = this.handleChange.bind(this);
    
//     this.state = {
//       // 假设 "DataSource" 是个全局范围内的数据源变量
//       // 评论列表
//       // getComments 获取今天有哪些评论
//       comments: DataSource.getComments()
//     };
//   }

//   componentDidMount() {
//     // 订阅更改
//     DataSource.addChangeListener(this.handleChange);
//   }

//   componentWillUnmount() {
//     // 清除订阅
//     DataSource.removeChangeListener(this.handleChange);
//   }

//   handleChange() {
//     // 当数据源更新时，更新组件状态
//     this.setState({
//       comments: DataSource.getComments()
//     });
//   }

//   render() {
//     return (
//       <div>
//         {this.state.comments.map((comment) => (
//           <Comment comment={comment} key={comment.id} />
//         ))}
//       </div>
//     );
//   }
// }

// class Comment extends React.Component {

//   render() {
//     return (
//       <div>
//         {this.props.comment}
//       </div>
//     );
//   }
// }




  

// Dactage.addChange((data) => {
//   console.log('真开心收到了报纸',data)
//   // console.log('123',this.listener)
// })
// Dactage.addChange((data) => {
//   console.log('真开心收到了报纸',data)
//   // console.log('123',this.listener)
// })
// // Dactage.addChange((data) => {
// //   console.log('真开心收到了报纸',data)
// //   // console.log('123',this.listener)
// // })
// Dactage.publish()
// // Dactage.getppt()

class App extends React.Component{

  handsubmmmit = (props) =>{
    const name=props.value
    console.log(name)
    class DataSource {

      constructor(){
        this.data='NBA火麒麟'
        // 订阅者
        this.listener = []
    
        this.text=0
    
      }
    // 订阅报纸
      addChange(demo){
        // 先定报纸，然后把订报纸的人push到数组listenr里面
        this.listener.push(demo)
        // console.log(this.listener.length)
        
      }
    // 取消订阅
      // removechange(demo){
      //   var index = this.listener.indexOf(demo)
      //   this.listener.splice(index,1)
      // }
    // 发布报纸
      publish(data){
      var data=this.getppt()
    
      // 发报纸，给每个定了报纸的人进行发报纸
        for(let i =0;i<this.listener.length;i++)
        {
          const listener =this.listener[i]
          listener(data)
        }
      }
      getppt(){
        return this.data
      }
    
    };
      const Dactage = new DataSource()
      Dactage.addChange((data) => {
        console.log('真开心收到了报纸',data)
        // console.log('123',this.listener)
      })
      // Dactage.addChange((data) => {
      //   console.log('真开心收到了报纸',data)
      //   // console.log('123',this.listener)
      // })
      // Dactage.addChange((data) => {
      //   console.log('真开心收到了报纸',data)
      //   // console.log('123',this.listener)
      // })
      Dactage.publish()
      // Dactage.getppt()
  }
  render() {
   
    return (
       <div>
        <button value='xiaom'  onClick={this.handsubmmmit(value)}>我是小明</button>
       </div>
    );
  }
}

export default App